<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>billing报价单</title>
  <style type="text/css">
    @page {
      size: A4;
    }
    * {
      font-family: "SourceHanSansCN";
    }
    .billing-container{
      width: 100vw;
      height: 100vh;
      padding: 0 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
    }

    ul {
      padding-left: 0px;
    }
    .billing-container .logo img {
      display: inline-block;
      width: 200px;
      margin-bottom: 40px;
    }
    ul li {
      list-style: none;
    }
    .billing-container .billing-content {
      height: 360px;
    }
    .left-content {
      padding-top: 40px;
      float: left;
    }
    .billing-content ul li {
      height: 36px;
      line-height: 36px;
    }
    .billing-content .left-content {
      width: 300px;
    }
    .billing-content .left-content ul {
      width: 100%;
    }
    .billing-content .right-content ul {
      width: 320px;
    }
    .billing-content .left-content ul li {
      /* word-break: normal; */
      white-space: pre-wrap;
    }


    .right-content {
      float: right;
    }
    .biling-overview {
      margin-top: 100px;
    }
    .billing-overview .title {
      font-size: 18px;
      font-weight: 550;
      height: 60px;
      line-height: 60px;
      padding-left: 0px;
      margin-bottom: 20px;
    }
    .overview {
      height:  280px;

    }
    .overview ul:nth-child(1){
      float: left;
    }
    .billing-overview ul li {
      height: 32px;
      line-height: 32px;
    }
    .overview ul:nth-child(2){
      padding-right: 0px;
      float: right;
    }
    .overview ul:first-child li:last-child {
      height: 60px;
      line-height: 60px;
    }
    .overview ul:nth-child(2) li:last-child {
      height: 60px;
      line-height: 60px;
      font-weight: 550;
    }
    .billing-remark {
      padding-left: 0px;
      margin-bottom: 80px;
    }
    .billing-remark p {
      margin: 8px 0px;
    }
    .billing-remark p span {
      font-weight: 550;
    }
    .billing-detail .title {
      font-size: 16px;
      font-weight: 550;
      height: 40px;
      line-height: 40px;
      padding-left: 0px;
    }
    .billing-detail p {
      margin: 8px 0px;
    }
    .billing-detail #credit {
      font-size: 12px;
    }
    .billing-detail {
      padding-left: 0px;
      margin-bottom: 40px;
    }
    .billing-schedu-detail {
      padding-left: 0px;
      margin-bottom: 20px;
    }
    .billing-schedu-detail .title{
      font-weight: 550;
      line-height: 40px;
      height: 40px;
      padding-left: 0px;
    }
    .billing-schedu-detail .title-bottom {
      border-bottom: 1px solid #000;
      font-weight: 550;
    }
    .table {
      width: 100%;
      text-align: left;
    }
    .table thead tr th {
      font-size: 14px;
    }
    .table tbody tr td {
      color: #2a2525;
    }
    .total {
      margin-top: 40px;
      height: 60px;
    }
    .total .content{
      border-top: 1px solid #000;
      margin-bottom: 40px;
      height: 36px;
      line-height: 36px;
    }
    .total .content div:nth-child(1){
      float: left;
    }
    .total .content div:nth-child(2){
      font-weight: 550;
      float: right;
    }
    .title {
      font-weight: 550;
      font-size: 16px;
      /* padding-left: 0px; */
      height: 40px;
      line-height: 40px;
    }
    .billing-transfer {
      padding-left: 0px;
    }
    .billing-transfer ul li span {
      display:inline-block;
      width: 70px;
    }
    .billing-transfer div {
      height: 28px;
    }
    .billing-transfer .desc {
      font-size: 18px;
      height: 36px;
    }
    .thanks {
      padding-left: 0px;
      margin-top: 60px;
    }
    .sign div:first-child {
      text-align: right;
      padding-right: 110px;
      margin-top: 40px;
    }
    .sign .address {
      padding-right: 0px;
      text-align: right;
    }
  </style>
  </head>
  <body>
    <div class="billing-container">
      <#setting number_format="0.00">
      <div class="logo">
         <img src="https://geexekimgoss.oss-cn-hangzhou.aliyuncs.com/geexekimgoss/fastone_logo.png" alt=""/>
      </div>
      <div class="billing-content">
        <div class="left-content">
          <ul>
            <li>AWS账户:</li>
            <li>${account_contract.account_id!""}</li>
            <li>客户名称:</li>
            <li>${account_contract.customer_fullname!""}</li>
            <li>收件人：${account_contract.customer_fullname!""}</li>
            <li>${account_contract.customer_address!""}</li>
          </ul>
        </div>
        <div class="right-content">
           <ul>
             <li></li>
             <li>由上海速石科技（Fastone）发出的付款通知</li>
             <li>如果您遇到任何关于速石科技的账户账单问题，</li>
             <li>请通过电子邮件联系我们或访问官网:</li>
             <li>http//:www.fastonetech.com</li>
             <li>付款通知日期：${billing_notice_date!""}</li>
             <li>到期日期:甲方收到乙方开具的发票后，${account_contract.billing_period?string.number}日内支付</li>
             <li><span>总金额:</span><span>${currency_symbol!"¥"} ${total_fee}</span></li>
           </ul>
        </div>
      </div>
      <div class="billing-overview">
        <div class="title">总览</div>
        <div class="overview">
          <ul>
            <li>AWS服务费用</li>
            <li>Fastone Compute Platform(软件订阅)</li>
            <#if account_contract.msp_display>
            <li>Fastone Professional Service</li>
            </#if>
            <li>本次付款通知总计</li>
          </ul>
          <ul>
            <li>${currency_symbol!"¥"}${total_cloud_cost!0.00}</li>
            <li>${currency_symbol!"¥"}${subscription_fee!0.00}</li>
            <#if account_contract.msp_display>
            <li>${currency_symbol!"¥"}${msp_fee!0.00}</li>
            </#if>
            <li>${currency_symbol!"¥"}${total_fee!0.00}</li>
          </ul>
        </div>
      </div>
      <div class="billing-remark">
        <p>备注:</p>
        <#setting number_format="#">
        <#if account_contract.tax_rate==0.13>
        <p>1、以上价格含税。软件订阅含${account_contract.tax_rate*100}%增值税，云服务及专业服务含6%的增值税</p>
        <#else>
        <p>1、以上价格含${account_contract.tax_rate*100}%的增值税</p>
        </#if>
        <p>2、本付款通知所属的账单期间 为 <span>${billing_period}</span>。</p>
      </div>
      <div class="billing-detail">
        <div class="title">AWS服务费用明细</div>
        <p>账单明细：${billing_period}</p>
        <p>帐号：${cloud_account_list!""}</p>
        <#setting number_format="0.00">
        <p>费用明细总额：${total_cloud_cost}</p>
        <#if credit_display>
          <p>Credit金额：${cloud_credit}</p>
          <p id="credit">(费用明细总额不包含Credit金额)</p>
        </#if>
      </div>
      <div class="billing-schedu-detail">
        <div class="title">Fastone Compute Platform (软件订阅)</div>
        <div class="title-bottom">China (Ningxia)</div>
        <div class="title">Fastone资源调度费用明细</div>
        <div class="title-bottom">China (Ningxia)</div>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>Amazon Elastic Compute Cloud running Linux/UNIX</th>
            <th>vCPU</th>
            <th>Hour</th>
            <th>vCPU*Hour</th>
          </tr>
        </thead>

        <tbody>
        <#list fs_sbuscription_detail as fs>
          <tr>
            <td>${fs.instance_type}</td>
            <#setting number_format="#">
            <td>${fs.vcpu}</td>
            <#setting number_format="0.00">
            <td>${fs.hour}</td>
            <td>${fs.vcpu_hours}</td>
          </tr>
        </#list>
        <tr>
          <td></td>
          <td></td>
          <td>总VCPU时数</td>
          <td>${total_fs_vcpu_hours}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>总物理core时数</td>
          <td>${total_fs_core_hours}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>总金额</td>
          <td>${subscription_fee_before_tax}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>税率</td>
          <#setting number_format="#">
          <td>${account_contract.tax_rate*100}%</td>
        </tr>
        <#if discount_display>
        <tr>
          <td></td>
          <td></td>
          <td>折扣</td>
          <td>${account_contract.discount*100}%</td>
        </tr>
        </#if>
        <tr>
          <td></td>
          <td></td>
          <#setting number_format="0.00">
          <td>税后金额(${currency_symbol!"¥"})</td>
          <td>${subscription_fee}</td>
        </tr>
        </tbody>
      </table>
      <div class="total">
         <div class="content">
          <div>合计</div>
          <div>${currency_symbol!"¥"}${subscription_fee}</div>
         </div>
      </div>
      <#if account_contract.msp_display>
      <div class="title">
        Fastone Professional Service
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>aws月实际帐单费用 </th>
            <th>百分比</th>
            <th>金额(人民币）</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>${total_cloud_cost}</td>
            <#setting number_format="#">
            <td>${account_contract.msp_rate*100}%</td>
            <#setting number_format="0.00">
            <td>${msp_fee}</td>
          </tr>
        </tbody>
      </table>
      <div class="total">
        <div class="content">
         <div>合计</div>
         <div>${currency_symbol!"¥"}${msp_fee}</div>
        </div>
     </div>
      </#if>
     <div class="billing-transfer">
       <div class="desc">电⼦资金转账详细信息：</div>
       <ul>
         <li><span>开户名称:</span>上海速石信息科技有限公司</li>
         <li><span>开户行:</span>中国工商银行股份有限公司上海市五角场支行</li>
         <li><span>银行账户:</span>1001224909300308992</li>
         <li><span>公司地址:</span>上海市杨浦区国通路127号16层（集中登记地）</li>
         <li><span>税号:</span>91310110MA1G8HJ129</li>
       </ul>
     </div>
     <div class="thanks">感谢您选择由上海速石信息科技提供的服务。</div>
     <div class="sign">
       <div>此致</div>
       <div class="address">上海速石信息科技有限公司</div>
     </div>
    </div>
  </body>
</html>